import { h, VNode } from 'vue';
import { ElCheckbox, ElCheckboxGroup } from 'element-plus/es';
import { Dictionary } from '@/global';
import {
  BaseFormItemConfig,
  BaseFormItemConfigInterface
} from '@/util/vnode_create_util/dynamic_form_creator/dynamic_form_item_creator';

export interface CheckBoxOption extends Dictionary{
  disabled?: boolean;
}
export interface CheckboxFormItemConfigInterface<T> extends BaseFormItemConfigInterface<T> {
  options: CheckBoxOption[] | (() => CheckBoxOption[]);
}
export class CheckboxFormItemConfig<T> extends BaseFormItemConfig<T> implements CheckboxFormItemConfigInterface<T> {
  options: CheckBoxOption[] | (() => CheckBoxOption[]);
  public constructor (data: Omit<CheckboxFormItemConfigInterface<T>, 'createMethod'>) {
    super(data);
    this.options = data.options;
  }

  createMethod (config: this, formData: T): VNode {
    const listToOptions = (item: CheckBoxOption) => <ElCheckbox disabled={(item as CheckBoxOption)?.disabled} label={item.value} key={`form${config.key ?? config.prop as string}`}>{item.text}</ElCheckbox>;
    return <ElCheckboxGroup v-model={formData[config.prop]}
                            disabled={typeof config.disabled !== 'function' ? config.disabled : config.disabled(formData)}>
      { config.options ? (typeof config.options === 'function' ? config.options().map(listToOptions) : config.options?.map(listToOptions)) : [] }
    </ElCheckboxGroup>;
  }
}
